<template>
    <!--头部-->
	<header>
		<!--页眉-->
		<div class="header">
			<div class="container">
				<p class="p14 col-md-6 col-xs-6 text-left">欢迎来到萌宠之家</p>
				<P class="p14 col-md-6 col-xs-6 text-right"><span class="glyphicon glyphicon-earphone"></span>&nbsp;&nbsp;&nbsp;宠物咨询：15123417911</P>
			</div>
		</div>
		<!--导航-->
		<nav class="nav_top">
			<div class="container">
				<div class="navbar-header">
					<button @click="isShow=!isShow" class="navbar-toggle">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					<a class="navbar-brand logo"><img src="../assets/images/petHomeLogo.png"></a>
					<div class="header-login" v-if="$store.state.islogin">
						<span>欢迎:{{this.$store.state.userInfo.uname}}</span>
						<span @click="handleLoginout">注销</span>
					</div>
					<div class="header-login" v-else>
						<router-link to="login">登录</router-link>
						<span>|</span>
						<router-link to="reg">注册</router-link>
					</div>
				</div>
				
				<transition name="fade">				
					<div v-show="isShow" class="navbar-list">				
						<ul class="nav navbar-nav nav_li navbar-right nav-box">
							<li>
								<router-link to="/">首页</router-link>
							</li>
							<li>
								<router-link to="about">关于我们</router-link>
							</li>
							<li>
								<router-link to="product">医疗设施</router-link>
							</li>
							<li>
								<router-link to="service">医疗服务</router-link>
							</li>
							<li>
								<router-link to="news">宠物百科</router-link>
							</li>
							<li>
								<router-link to="contact">联系我们</router-link>
							</li>
						</ul>					
					</div>
				</transition>
				
			</div>
		</nav>
	</header>
</template>
<style>
.container{
	position: relative;
}
.navbar-list{
	height: 250px;
	overflow: hidden;
	background-color: #f9f9f9;
}
.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
}
.fade-enter, .fade-leave-to {
    height: 0;
}
.header-login{
	position: absolute;
	right: 80px;
	font-size: 16px;
	line-height: 68px;
}
.header-login a{
	color: red;
}
.header-login span{
	margin: 0 5px;
}
</style>

<script>
export default {
	data(){
		return {
			isShow: false,
		}
	},
	methods: {
	  handleLoginout() {
		sessionStorage.removeItem("userInfo")
		sessionStorage.removeItem("islogin")
		this.$toast({
			message: '已注销',
			position: 'center',
			duration: 3000
		});
		this.$router.go(0)
	  },
  },
}
</script>